<template>
  <div v-if="permissionsLists(14)">
    <page-header :title="$t('m.Users_list')" :has-return="false"></page-header>
    <!--容器-->
    <div class="container">
      <div class="box_index">
        <!-- 搜索栏 -->
        <search-bar :options="searchBarOptions" />

        <!--分割线-->
        <div class="line"></div>

        <!-- 表格栏 -->
        <div class="table-box">
          <fast-table :options="fastTableOptions" :data="page.records" />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>

    <!-- 冻结 / 解冻 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="cooperationDialog"
      :title="
        userMsg.state == 2
          ? $t('m.Account_unfreeze')
          : $t('m.Users_Status_Dropdown_Freeze')
      "
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1" style="padding:0;">
          {{
            userMsg.state == 2
              ? $t('m.Users_Afterunfreezing')
              : $t('m.Users_Afterfreezing')
          }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cooperationDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="changeState" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from '@/components/pagination.vue'
import page from '@/mixins/page'
import SearchBar from '@/components/search-bar.vue'
import FastTable from '@/components/fast-table.vue'

export default {
  components: { FastTable, SearchBar, pagination },
  mixins: [page],
  data () {
    return {
      params: {
        deposit: '',
        rangeTime: '',
        search: '',
        sex: '',
        source: '',
        state: ''
      },
      // 来源
      sourceOption: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: '1',
          label: 'APP'
        },
        {
          value: '2',
          label: 'H5'
        }
      ],
      fastTableOptions: {},

      optionsState: this.$dict.user.state,
      cooperationDialog: false,
      userMsg: '',
      permissionsIds: []
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(14)) {
      return
    }
    this.fastTableOptions = {
      columns: [
        {
          label: this.$t('m.User_ID'),
          prop: 'id',
          formatter: row => row.ucode
        },
        {
          label: this.$t('m.Source'),
          prop: 'source',
          formatter: row =>
            this.$format.strFormat(this.$format.stateFormat(row.source, this.sourceOption))
        },
        {
          label: this.$t('m.Users_Details_PhoneNo'),
          prop: 'phone',
          minWidth: '200px',
          showPhone: true
        },
        {
          label: this.$t('m.Email'),
          prop: 'email',
          minWidth: '200px',
          showEmail: true
        },
        {
          label: this.$t('m.Users_Usage_fréquency'),
          prop: 'orderNum'
        },
        {
          label: this.$t('m.Users_Total_amount_of_payment'),
          prop: 'consumed',
          formatter: row => this.$format.amountFormat(row.consumed)
        },
        // {
        //   label: this.$t('m.Users_Deapoit'),
        //   prop: 'depositAmount',
        //   formatter: row => this.$format.amountFormat(row.depositAmount)
        // },        
        {
          label: this.$t('m.Users_Registration_date'),
          prop: 'createTime',
          formatter: row => this.$format.dateformat(row.createTime)
        },
        {
          label: this.$t('m.Users_Status'),
          prop: 'state',
          formatter: row =>
            this.$format.stateFormat(row.state, this.optionsState)
        },
        {
          operate: true,
          showcolumn: this.isArrayEqual([15, 17], this.permissionsLists),
          display: 'dropdown',
          actions: [
            {
              label: this.$t('m.Details'),
              permission: row => this.permissionsLists(15),
              click: row => this.userDetail(row)
            },
            {
              label: row =>
                row.state == 1
                  ? this.$t('m.Users_Status_Dropdown_Freeze')
                  : this.$t('m.Account_unfreeze'),
              permission: row => this.permissionsLists(17),
              click: row => this.modifyState(row)
            }
          ]
        }
      ]
    }
    this.getSearchBar()
    this.getPage()
  },

  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: this.params.search,
            type: 'input',
            prop: 'search',
            placeholder: [
              this.$t('m.Users_Details_PhoneNo'),
              this.$t('m.Email'),
              this.$t('m.User_ID')
            ].join(' / ')
          },
          {
            value: this.params.rangeTime,
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.Users_Registration_date')
          },
          {
            value: this.params.state,
            type: 'select',
            prop: 'state',
            label: this.$t('m.status'),
            options: this.optionsState
          },
          {
            value: this.params.source,
            type: 'select',
            prop: 'source',
            label: this.$t('m.Source'),
            options: this.sourceOption
          }
        ]
      }
    },
    getPage () {
      this.$api.user.getPage(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          res.data.records = res.data.records.map(item => {
            return {
              ...item,
              showPhone: false,
              showEmail: false
            }
          })
          this.page = res.data
        }
      })
    },

    userDetail (row) {
      // console.log(this.page)
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/user/detail',
        query: { id: row.id }
      })
    },

    // 修改状态
    modifyState (row) {
      this.userMsg = row
      this.cooperationDialog = true
    },
    changeState () {
      this.$api.user
        .modifyState({
          id: this.userMsg.id,
          state: this.userMsg.state == 1 ? 2 : 1
        })
        .then(res => {
          if (this.$ok(res)) {
            this.cooperationDialog = false
            this.$message.success(res.message)
            this.getPage()
          } else {
            this.$message.error(res.message)
          }
        })
    }
  }
}
</script>

<style scoped lang="scss"></style>
